<template>
	<view class="showModel rtl" v-show="isShow" @click="isShow=false">
		<view class="footer " @click.stop="()=>{}">
			<view class="title">
				{{t("OE search")}}
			</view>
			<textarea class="search_box" v-model="searchText" :placeholder="t('searchPl')" placeholder-style="font-size:28rpx"></textarea>
			<view class="footer_active">
				<view class="" @click="back">
					{{t("back")}}
				</view>
				<view class="Confrm" @click="Confrm" >
					{{t("Search")}}<uv-icon class="flip" name="arrow-right" color="#fff"></uv-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		useI18n
	} from "vue-i18n";
	const emits = defineEmits(["back","Confrm"]);
	const searchText=ref("")
	const {
		t
	} = useI18n();
	const isShow=ref(false);
	const show=()=>{
		isShow.value=true;
	}
	const hide=()=>{
		isShow.value=false;
	}
	const back=()=>{
		isShow.value=false;
		emits("back");
	}
	const Confrm=()=>{
		if (!searchText.value) {
			return uni.showToast({
				title: t("Please enter search content"),
				icon: "none"
			})
		}
		uni.setStorageSync("search", searchText.value)
		isShow.value=false;
		uni.navigateTo({
			url: "/pages/index/homeSearchList"
		})
		emits("Confrm");
	}
	defineExpose({
		isShow
	})
	
</script>

<style lang="scss" scoped>
	@import "@/static/css/index.scss";
	.showModel{
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1;
		background: rgba(0, 0, 0, .5);
		width: 100%;
		height: 100%;
		display: flex;
		align-items: flex-end;
	}
	   .footer {
	   	background: #fff;
	   	border-radius: 30rpx 30rpx 0 0;
		width: 100%;
	   
	   	.title {
	   		text-align: center;
	   		padding: 20rpx 0;
	   	}
	   
	   	.search_box {
	   		border: 1px solid #ccc;
	   		border-radius: 10rpx;
	   		margin: 20rpx;
	   		width: calc(100% - 40rpx);
	   		min-height: 500rpx;
	   		padding: 20rpx;
	   		box-sizing: border-box;
	   
	   	}
	   
	   	.footer_active {
	   		display: flex;
	   		align-items: center;
	   		justify-content: space-between;
	   		padding: 30rpx 40rpx;
	   		background: #127B56;
	   		color: #fff;
	   		border-radius: 10rpx 10rpx 0 0;
	   		font-size: 28rpx;
	   
	   		.Confrm {
	   			display: flex;
	   			align-items: center;
	   		}
	   
	   		.tip {
	   			font-size: 24rpx;
	   			color: #dddddd;
	   		}
	   	}
	   
	   }    
</style>
